<template>
  <div class="hello">
    <Header></Header>

    <SDialog
      :title="('管理成员')"
      :btn1Text="team_manage ? ('添加成员') : ''"
      btn1Icon="el-icon-plus"
      :btn1Medthod="addTeamMember"
      :onCancel="callback"
      :showCancel="false"
      :onOK="callback"
    >
      <div>
        <el-table
          align="left"
          :data="list"
          :empty-text="('团队成员为空')"
        >
          <el-table-column
            prop="memberUserName"
            :label="('成员用户名')"
          ></el-table-column>
          <el-table-column
            prop="teamMemberGroupId"
            :label="('成员权限')"
          >
            <template slot-scope="scope">
              {{
                scope.row.teamMemberGroupId == 2
                  ? ('团队管理员')
                  : ('普通成员')
              }}
            </template>
          </el-table-column>
          <el-table-column prop="name" :label="('姓名')"></el-table-column>
          <el-table-column
            prop="addTime"
            :label="('添加时间')"
          ></el-table-column>

          <el-table-column prop :label="('操作')">
            <template slot-scope="scope">
              <el-button
                v-if="team_manage"
                @click="deleteTeamMember(scope.row)"
                type="text"
                size="small"
                >{{ ('删除') }}</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </SDialog>

    <SDialog
      v-if="dialogFormVisible"
      :title="('添加成员')"
      :onCancel="
        () => {
          dialogFormVisible = false
        }
      "
      :onOK="myFormSubmit"
      width="400px"
    >
      <el-form>
        <el-form-item :label="('成员用户名') + ':'">
          <el-input
            v-model="MyForm.memberUserName"
          >
            请输入内容
          </el-input>
        </el-form-item>
        <el-form-item class="text-center">
          <el-radio v-model="MyForm.teamMemberGroupId" label="1">{{
            ('普通成员')
          }}</el-radio>
          <el-radio v-model="MyForm.teamMemberGroupId" label="2">{{
            ('团队管理员')
          }}</el-radio>
        </el-form-item>
      </el-form>
    </SDialog>
  </div>
</template>

<script>
import {getList,memberSave,memberDelete} from "@/api/teamMember"
export default {
  components: {},
  props: {
    callback: {
      type: Function,
      required: false,
      default: () => {}
    },
    teamId: {
      type: Number,
      required: false,
      default: 0
    },
    team_manage: {
      type: Number || String,
      required: false,
      default: 1
    }
  },
  data() {
    return {
      MyForm: {},
      list: [],
      dialogFormVisible: false,
      memberOptions: []
    }
  },
  methods: {
    geList() {
      getList(
      this.teamId    //
      ).then(data => {

        this.list = data.data
      })
    },
    reSetMyForm() {
      this.MyForm = {
        id: '',
        memberUserName: '',
        teamMemberGroupId: '1'
      }
    },
    myFormSubmit() {
      memberSave(
        {
          teamId: this.teamId,
          memberUserName: this.MyForm.memberUserName,
          teamMemberGroupId: this.MyForm.teamMemberGroupId
        }
      ).then(data => {
        debugger;
        if (data.code === 1) {
          this.dialogFormVisible = false
          this.geList()
          this.reSetMyForm()
        } else {
          this.$alert(data.msg)
        }
      })
    },

    deleteTeamMember(data) {
      debugger;
      this.$confirm(('确认删除'), ' ', {
        confirmButtonText: ('确认'),
        cancelButtonText: ('取消'),
        type: 'warning'
      }).then(() => {
        memberDelete(data).then(res => {
         if (res.code === 1){
          this.geList()
          this.reSetMyForm()
         }else{
          this.$alert(res.msg)
         }
        })
      })
    },
    addTeamMember() {
      this.reSetMyForm()
      this.dialogFormVisible = true
    },
    goback() {
      this.$router.push({ path: '/team/index' })
    },
    dropdownCallback(data) {
      this.MyForm.memberUserName = data
    },
    // getAllUser() {
    //   this.request('/api/user/allUser', {
    //     username: ''
    //   }).then(data => {
    //     var Info = data.data
    //     var newInfo = []
    //     // 过滤掉已经是成员的用户
    //     for (var i = 0; i < Info.length; i++) {
    //       let isMember = this.isMember(Info[i]['value'])
    //       if (!isMember) {
    //         newInfo.push(Info[i])
    //       }
    //     }
    //     this.memberOptions = []
    //     for (let index = 0; index < newInfo.length; index++) {
    //       this.memberOptions.push({
    //         value: newInfo[index].username,
    //         label: newInfo[index].name
    //           ? newInfo[index].username + '(' + newInfo[index].name + ')'
    //           : newInfo[index].username,
    //         key: newInfo[index].username
    //       })
    //     }
    //   })
    // },
    // // 判断某个用户是否已经是会员
    // isMember(username) {
    //   let list = this.list
    //   for (var i = 0; i < list.length; i++) {
    //     if (list[i]['memberUserName'] == username) {
    //       return true
    //     }
    //   }
    //   return false
    // }
  },

  mounted() {
    this.reSetMyForm()
    this.geList()
    this.getAllUser()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello {
  text-align: left;
}

.add-cat {
  float: right;
  margin-right: 15px;
  font-size: 14px;
}

.center-card {
  text-align: left;
  width: 700px;
  height: 600px;
}

.goback-btn {
  z-index: 999;
  font-size: 14px;
}
</style>

<!-- 全局css -->
<style>
.el-table .success-row {
  background: #f0f9eb;
}
</style>
